<template>
  <div class="pager" v-if="total > pageSize">
    <a-pagination
      :current="pageNo"
      :page-size="pageSize"
      :total="total"
      show-size-changer
      :page-size-options="pageSizeOptions"
      @change="p => $emit('update:pageNo', p)"
      @showSizeChange="(_, s) => $emit('update:pageSize', s)"
    />
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{ pageNo: number; pageSize: number; total: number; pageSizeOptions?: number[] }>(), {
  pageSizeOptions: () => [10, 20, 50, 100]
})
</script>

<style scoped>
.pager { margin-top: 16px; text-align: center; }
</style>


